Refactor SCSS imports to use @use syntax, update portfolio entries, and add new projects

1 files changed, 55 insertions, 0 deletions

diff --git a/src/pages/portfolio/[id].astro b/src/pages/portfolio/[id].astro
new file mode 100644
index 0000000..55bac3f
--- /dev/null
+++ b/src/pages/portfolio/[id].astro
@@ -0,0 +1,55 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getCollection, render } from "astro:content";
+import { type GetStaticPaths } from "astro";
+import TechnologyBadge from "../../partials/TechnologyBadge.astro";
+
+interface Props {
+    entry: any;
+}
+
+export const getStaticPaths: GetStaticPaths = (async () => {
+	const entries = await getCollection("portfolio");
+	return entries.map((entry: any) => ({
+		params: { id: entry.id },
+		props: { entry },
+	}));
+});
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+---
+
+<Layout title={entry.data.title} description={entry.data.description}>
+    <a id="link-back" href="/portfolio">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 inline-block mr-2">
+            <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+        Volver al portfolio
+    </a>
+
+	<h1>{entry.data.title}</h1>
+
+	<Content />
+
+    <h2>Tecnologías utilizadas</h2>
+
+    {entry.data.technologies.map((technology: string) => (
+        <TechnologyBadge size="small" code={technology} />
+    ))}
+</Layout>
+
+<style>
+    a#link-back {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        text-decoration: none;
+        text-transform: uppercase;
+        transition: color 0.2s ease-in-out;
+    }
+
+    a#link-back svg {
+        height: 1em;
+    }
+</style>